<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        #top-bar {
            background-color: #383f42;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            z-index: 999;
        }

        #small-logo {
            font-family: "Montserrat", sans-serif;
            font-weight: 400;
            font-size: 16px;
            letter-spacing: 1em;
            color: white;
            line-height: 60px;
            margin-left: 20px;
        }

        #intro {
            position: relative;
            z-index: 1;
            margin-top: 60px;
            height: 475px;
            background-color: #f0f0f0;
            padding: 10px 0;
            background-image: url(../img/photo-1.jpg);
            background-size: cover;
            background-attachment: fixed;
            border-bottom: 10px solid #717c80;
        }

        #name {
            margin: 50px 0;
            text-align: center;
            color: #8b9599;
            letter-spacing: 1em;
            -webkit-transition: all 1000ms;
            -moz-transition: all 1000ms;
            transition: all 1000ms;
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            transition-delay: 300ms;
            -webkit-transform: scale(0.7);
            -moz-transform: scale(0.7);
            -ms-transform: scale(0.7);
            -o-transform: scale(0.7);
            transform: scale(0.7);
            font-family: "Montserrat", sans-serif;
            font-weight: 400;
            font-size: 28px;
            text-shadow: 0 0 10px #717c80;
        }

        @media (max-width: 420px) {
            #name {
                -webkit-transform: scale(0.8);
                -moz-transform: scale(0.8);
                -ms-transform: scale(0.8);
                -o-transform: scale(0.8);
                transform: scale(0.8);
            }
        }

        #name.larger {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }

        @media (max-width: 420px) {
            #name {
                font-size: 20px;
            }
        }

        #name span {
            opacity: 0;
            -webkit-transition: all 500ms;
            -moz-transition: all 500ms;
            transition: all 500ms;
        }

        #name span.visible {
            opacity: 1;
            text-shadow: none;
        }

        #name span.darker {
            color: #383f42;
            font-weight: 700;
            text-shadow: none;
        }

        section {
            height: 600px;
        }
    </style>

    <script src="../../js/jquery.js"></script>

    <script>
        $(document).ready(function() {

            setTimeout(function() {

                $("#name").removeClass("larger");

                $("#name span").each(function() {
                    $(this).css("-webkit-transition-delay", $(this).data("delay") + "ms").css("transition-delay", $(this).data("delay") + "ms");
                    $(this).addClass("visible");
                });

            }, 1000);

        });
    </script>
</head>
<body>
<link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div id="top-bar">
    <div id="small-logo">G/K</div>
</div>
<div id="intro">
    <div id="name" class="larger"><span data-delay="1100">G</span><span data-delay="500">R</span><span data-delay="800">E</span><span data-delay="0" class="darker visible">G</span><span data-delay="0" class="darker visible">/</span><span data-delay="0" class="darker visible">K</span>
        <span data-delay="1000">O</span><span data-delay="700">H</span><span data-delay="1300">N</span>
    </div>
</div>
<section></section>
</body>
</html>